<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  provide(){
    return {
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  beforeCreate(){
  },
  created(){
    this.changeShowType();
  },
  methods:{
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    },
    changeShowType(){
      if(!this.$route.query.showType){
        if(window.screen.height > window.screen.width){
          this.global.showType = 'mobile'
        }else{
          this.global.showType = 'pc';
        }
      }
    }
  },
  watch:{
    "$route.query.showType": function(newVal, oldVal){
      //或者这里直接监听global.showType应该也可以...
      //进来证明有值，或者从有值变为无值
      this.changeShowType();
      // console.log(newVal);
      // console.log(oldVal);
      // console.log(this.global.showType);
      // console.log(this.$route.query.showType);
      if(this.$route.query.showType){
        // let showTypeTemp = localStorage.getItem('showTypeTemp');
        // if(this.global.showType != this.$route.query.showType){
          // localStorage.setItem('showTypeTemp', this.$route.query.showType);
          this.global.showType = this.$route.query.showType;
          //会一直不停刷新
          // location.reload();
        // }
      }
      // console.log('refresh');
      this.reload();
    }
  }
}
</script>

<style lang='scss'>
html, body{
  margin: 0;
  padding: 0;
  font-size: $base-fsize;
}
p {
  margin: 10px 0;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: $base-color;
}
.el-pagination{
  text-align: center!important;
}
.el-pager li.active{
  background-color: $base-color!important;
}
.hidden{
  display: none;
}
</style>
